<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../sass/01.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="../js/01.js" type="text/javascript"></script>
    <link rel="stylesheet" href="../sass/lbt.css" />
    <script src="../js/lbt.js"></script>
     <link rel="stylesheet" href="../sass/ggys.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  </head>
  <body>
    <div class="topBar">
      <div class="wrap">
        <ul class="topBarR">
          <li>
            <a href="#" class="login">请登录</a>
            <a href="#">免费注册</a>
          </li>
          <li class="pipe">|</li>
          <li class="menu_hd">
            <a href="#">我的有路</a>
            <ul class="menu_list">
              <li><a href="#">自营订单</a></li>
              <li><a href="#">店铺订单</a></li>
              <li><a href="#">团购订单</a></li>
              <li><a href="#">我的余额</a></li>
              <li><a href="#">我的校园</a></li>
            </ul>
          </li>
          <li class="pipe">|</li>
          <li><a href="#">我要开店</a></li>
          <li class="pipe">|</li>
          <li><a href="#">有路公众号</a></li>
          <li class="pipe">|</li>
          <li><a href="#">团购批发</a></li>
          <li class="pipe">|</li>
          <li><a href="#">客服服务</a></li>
        </ul>
        <div class="topBarL">
          <img src="	https://www.youlu.net/images/home/welcome.jpg" alt="" />
          <span>您好，欢迎光临有路网</span>
        </div>
      </div>
    </div>
    <div class="search-wrap">
      <div class="search-nav">
        <div class="logo">
          <a href="#">
            <img src="../image/logo.jpg" alt="" />
          </a>
        </div>
        <div class="search">
          <form action="search/check">
            <input type="text" class="sousu" />
            <input type="submit" value="搜索" class="anniu" />
            <label>书名、作者、出版社、ISBN、文具</label>
          </form>
          <div class="search_tip">
            <a href="#">同店找书</a>
            <span></span>
            <a href="#">高级搜索</a>
          </div>
          <div class="search_hot">
            <strong>热门搜索:</strong>
            <a href="#">毛泽东思想和中国特色</a>
            <a href="#">高等数学(第七版)</a>
            <a href="#">计算机网络</a>
            <a href="#">管理学</a>
          </div>
        </div>

        <div class="bookCart">
          <a href="#">网站购物车<span>0</span>本</a>
          <a href="#">店铺购物车<span>0</span>本</a>
        </div>
      </div>
    </div>
    <div class="navWarp">
      <div class="nav">
        <div class="navListTop">
          <a href="#" class="top">全部图书分类</a>
          <ul>
            <li>
              <h2>经济管理</h2>
              <div>
                <a href="#">市场营销</a>
                <a href="#">经济学理论</a>
                <a href="#">国际贸易</a>
                <a href="#">物流管理</a>
                <a href="#">管理学原理</a>
                <a href="#">财务原理</a>
              </div>
            </li>
            <li>
              <h2>文学艺术</h2>
              <div>
                <a href="#">设计</a>
                <a href="#">音乐</a>
                <a href="#">青春文学</a>
                <a href="#">绘画</a>
                <a href="#">外国文学</a>
                <a href="#">人物传记</a>
              </div>
            </li>
            <li>
              <h2>人文社科</h2>
              <div>
                <a href="#">数学</a>
                <a href="#">英语教材</a>
                <a href="#">化学</a>
                <a href="#">日语</a>
                <a href="#">生物科学</a>
                <a href="#">专业日语</a>
              </div>
            </li>
            <li>
              <h2>科学艺术</h2>
              <div>
                <a href="#">语言与编程</a>
                <a href="#">电子通信</a>
                <a href="#">电工电子</a>
                <a href="#">数据库</a>
                <a href="#">建筑工程</a>
                <a href="#">土木工程</a>
              </div>
            </li>
            <li>
              <h2>生活休闲</h2>
              <div>
                <a href="#">家庭保健</a>
                <a href="#">美食烹饪</a>
                <a href="#">导游必备</a>
                <a href="#">地理学理论</a>
                <a href="#">动漫卡通</a>
                <a href="#">球类</a>
              </div>
            </li>
            <li>
              <h2>教育考试</h2>
              <div>
                <a href="#">教学理论</a>
                <a href="#">自考</a>
                <a href="#">研究考试</a>
                <a href="#">考研英语</a>
                <a href="#">公务员考试</a>
                <a href="#">初高中用书</a>
              </div>
            </li>
            <li><h2>浏览所有图书分类</h2></li>
            <li style="padding: 0px">
              <img src="../image/tj.jpg" alt="" />
            </li>
          </ul>
        </div>

        <ul class="navList">
          <li>
            <a href="#">首页</a>
          </li>
          <li><a href="#">旧书回收</a></li>
          <li><a href="#">分类</a></li>
          <li><a href="#">入驻书店</a></li>
          <li><a href="#">文具</a></li>
          <li><a href="#">电子书</a></li>
        </ul>
      </div>
    </div>
    <div class="shoping">
      <div class="shopingWrap">
        <div class="shopingNav">
          <a href="#">如何购买</a>
          <span>|</span>
          <a href="#">如何支付</a>
          <span>|</span>
          <a href="#">旧书缺货怎么办</a>
          <span>|</span>
          <a href="#">配送方式与配送费</a>
          <span>|</span>
          <a href="#">普通会员与VIP会员</a>
          <span>|</span>
          <a href="#">有路积分说明</a>
          <span>|</span>
          <a href="#">有路礼券说明</a>
          <span>|</span>
          <a href="#">账户余额说明</a>
          <span>|</span>
          <a href="#">退货退款说明</a>
          <span>|</span>
          <a href="#">电子商品说明</a>
        </div>
        <!-- 轮播图 -->
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="../image/lbt1.jpg" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="../image/lbt2.jpg" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="../image/lbt3.jpg" alt="" />
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
        <!-- 公告栏 -->
        <div class="bulletin">
          <div class="bulletinBlack bulletinStyle">
            <h2>黑板报</h2>
            <ul>
              <li><a href="#">2021新年发货信息</a></li>
              <li><a href="#">2021新年发货信息</a></li>
              <li><a href="#">2021新年发货信息</a></li>
              <li><a href="#">2021新年发货信息</a></li>
            </ul>
          </div>
          <div class="bulletinHandbook bulletinStyle">
            <h2>购物指南</h2>
            <ul>
              <li><a href="#">保证24小时之内发货</a></li>
              <li><a href="#">保证24小时之内发货</a></li>
              <li><a href="#">保证24小时之内发货</a></li>
              <li><a href="#">保证24小时之内发货</a></li>
              <li><a href="#">保证24小时之内发货</a></li>
              <li><a href="#">保证24小时之内发货</a></li>
              <li><a href="#">保证24小时之内发货</a></li>
            </ul>
          </div>
        </div>
        <!-- 轮播图2 -->
        
        <div class="carousel">
             <div class="carouselNav">
               <h3>推荐图书</h3>
               <span class="pp"  style="color:red;"></span>
             </div> 
          <div class="carouselkuang">
              
            <ul class="carouselyi carousel_style">
             
            </ul>
          
          
            <ul class="carouseler carousel_style">
           
            </ul>
         
        
            <ul class="carouselsan carousel_style">
             
            </ul>
            <ul class="carouselsi carousel_style">
             
            </ul>
            <ul class="carouselyi carousel_style">
             
            </ul>
        </div>
           <div class="left carouselJt">&lt;</div>
           <div class="right carouselJt">&gt;</div>
        </div>
        <div class="bz">
            <img src="../image/baozheng.jpg" alt="">
        </div>
        <div class="bookone">
            <div class="ranking">
                <h2>近期热销榜</h2>
            </div>
            <div class="bookp">
                <ul>
                    <li id="bookpTop"><span>1</span></li>
                    <li><span>2</span>hhh</li>
                    <li><span>3</span>hh</li>
                    <li><span>4</span>hh</li>
                    <li><span>5</span>hh</li>
                    <li><span>6</span>hh</li>
                    <li><span>7</span>hh</li>
                    <li><span>8</span>hh</li>
                    <li><span>9</span>hh</li>
                    <li><span>10</span>hh</li>
                </ul>
            </div>
        </div>
      </div>
    </div>
    <div class="theme">
      <div class="themeNav">

        <h3>新书热推</h3>
        <ul>
          <li  class="themeNava"><a href="#conterone">外国小说</a></li>
          <li><a href="#contertwo">青春文学</a></li>
          <li><a href="#conterthree">小说集</a></li>
          <li><a href="#conterfour">散文随笔</a></li>
          <li><a href="#conterfive">数学</a></li>
          <li><a href="#">现代文学</a></li>
          <li><a href="#">人物传记</a></li>
        </ul>
      </div>
      <div class="themeConter">
        <div class="left">
        <ul id="conterone"></ul>
        <ul id="conterone"></ul>
        <ul id="conterone"></ul>
        <ul id="conterone"></ul>
        <ul id="conterone"></ul>
        </div>
        <div class="right">
          <a href="#">
            <img src="../image/tcb1.jpg" alt="">
          </a>
          <a href="#">
            <img src="../image/tcb2.jpg" alt="">
          </a>
          <a href="#">
            <img src="../image/tcb3.jpg" alt="">
          </a>
          <a href="#">
            <img src="../image/tcb4.jpg" alt="">
          </a>
        </div>

      </div>
    </div>
    <div class="recommend">
      <a href="#"><img src="../image/recom1.jpg" alt=""></a>
      <a href="#" style="padding:0px 15px"><img src="../image/recom2.jpg" alt=""></a>
      <a href="#"><img src="../image/recom3.jpg" alt=""></a>
    </div>
    <div class="theme">
      <div class="bookNav ">

        <h3>分类推荐</h3>
        <ul>
          <li class="themeNava"><a href="#conterone">领导学</a></li>
          <li><a href="#contertwo">逻辑学</a></li>
          <li><a href="#conterthree">创业必修</a></li>
          <li><a href="#conterfour">设计</a></li>
          <li><a href="#conterfive">数据库</a></li>
          <li><a href="#">演讲口才</a></li>
          <li><a href="#">礼仪形象</a></li>
          <li ><a href="#">成功激励</a></li>
          <h4> 特价清仓</h4>
        </ul>
        
      </div>
      <div class="themeConter">
        <div class="left">
        <ul id="conterone"></ul>
        <ul id="contertwo"></ul>
        <ul id="conterthree"></ul>
        <ul id="conterfour"></ul>
        <ul id="conterfive"></ul>
        </div>
        <div class="right2">
          <div class="bookRecom">
            <ul>
                <li id="recomTop"><span>1</span></li>
                <li><span>2</span>hhh</li>
                <li><span>3</span>hh</li>
                <li><span>4</span>hh</li>
                <li><span>5</span>hh</li>
                <li><span>6</span>hh</li>
                <li><span>7</span>hh</li>
                <li><span>8</span>hh</li>
                <li><span>9</span>hh</li>
                <li><span>10</span>hh</li>
            </ul>
        </div>
      </div>
    </div>
    </div>
    <div class="screen">
        <div class="screenWrap">
         <div class="screenTop">
          <div>
            <h3>消费者保障</h3>
            
            <ul>
              <li><a href="#">7天无理由退货</a></li>
              <li><a href="#">24小时之内发货</a></li>
              <li><a href="#">服务中心</a></li>
              
            </ul>
          </div>
          <div>
            <h3>新手上路</h3>
            <ul>
              
              <li><a href="#">配送说明</a></li>
              <li><a href="#">如何买书</a></li>
              <li><a href="#">如何支付</a></li>
              <li><a href="#">如何退款</a></li>
            </ul>
          </div>
          <div>
            <h3>付款方式</h3>
            <ul>
              <li><a href="#">网上支付</a></li>
              <li><a href="#"></a>余额支付</li>
              <li><a href="#"></a>积分支付</li>
              <li><a href="#"></a>礼券支付</li>
            </ul>
          </div>
          <div>
            <h3>个人账户</h3>
            <ul>
              <li><a href="#">如何注册</a></li>
              <li><a href="#">礼券与VIP</a></li>
              <li><a href="#">会员升级为VIP</a></li>
              <li><a href="#"></a>第三方登录</li>
              <li><a href="#"></a>更多介绍</li>
            </ul>
          </div>
         </div>
         <div class="lj">
           <p>友情链接:</p>
           <p>
             <a href="#">二手货</a>
             <a href="#">腾讯企业</a>
             <a href="#">QQ企业培训</a>
             <a href="#">二手网</a>
             <a href="#">中国考研网</a>
             <a href="#">工程资料</a>
             <a href="#">中华讲师网</a>
             <a href="#">考试用书</a>
             <a href="#">违章查询</a>
             <a href="#">快递查询</a>
             <a href="#">人力资源</a>
             <a href="#">圣才学习网</a>
             <a href="#">简历模版</a>
             <a href="#">二手手机回收</a>
             <a href="#">防伪码</a>
             <a href="#">查询产品</a>
             <a href="#">防伪溯源</a>
             <a href="#">微信小程序</a>
             <a href="#">商店内推</a>
             <a href="#">小王子</a>
             <a href="#">期刊发表</a>
             <a href="#">互联网联合</a>
             <a href="#">辟谣平台</a>
             <a href="#">吕布云轮</a>
           </p>
         </div>
         <div class="footer">
         <div class="footer-wrap">
          <div class="footer-xx">
            名称：南昌有路文化发展有限公司
            <br>
            地址：南昌昌北经济技术开发区玉屏西大街299号清华科技园B205室
            <br>
            咨询电话：0791-83849620 传真：0791-83849520-810 邮箱：do(a)youlu.net 
            <br>
            © 有路网 
            <a href="#">赣ICP备06008180号-2</a>
            <a href="#" >赣工商网备第200911040306561424号</a>
           </div>
          <div class="footerzzs">  
            <div class="one">
            <a href="#"><img src="../image/xkz.jpg" alt=""></a>
            <a href="#"><img src="../image/yyzz_s.jpg" alt=""></a>
          </div>
          <div class="two">
            <a href="#"><img src="../image/wcn.jpg" alt=""></a>
            <a href="#" ><img src="../image/smrz.png" alt="" style="height: 35px;"></a>
          </div>
        </div>
         </div>
           <div class="tooter-right">
             
           </div>
         </div>
         <div class="police">
           <div class="police-wrap">
             <div class="police-b1"><a href="#"><img src="../image/bjgt.gif" alt=""></a></div>
             <div class="police-b2">
               <p>
                 <a href="#">关于有路</a>
                 ┆
                 <a href="#">乘车热线</a>
                 ┆
                 <a href="#">有路联盟</a>
                 ┆
                 <a href="#">网站地图</a>
                 ┆
                 <a href="#">帮助中心</a>
                 ┆
                 <a href="#">客服中心</a>
                 ┆
                 <a href="#">友情链接</a>
                 ┆
                 <a href="#">触屏版</a>
                </p>
                <div>
                  咨询QQ:
                  <a href="#"><img src="../image/qq.gif" alt=""></a>
                </div>
                <b>
                  有路网-书山有路网上二手书店是国内专业的二手书旧书在线销售网站，提供优质低廉的正版旧书、旧教材。
                  <br>
                  提供支付宝、财付通、网上银行、银行汇款等支付方式；提供平邮、快递、EMS、自取等多种送货方式。
                  <br>
                  付款后24小时内发货，自动跟踪物流。所有图书全场一角起价，不满意无理由退货。
                </b>
             </div>
             <div class="police-b3"><a href="#"><img src="../image/wangan.gif" alt=""></a>
                    <p>360112011051301</p>
            </div>
             <div class="police-b4"><a href="#"><img src="../image/yhxx.jpg" alt=""></a></div>
           </div>
         </div>
        </div>
    </div>
    <!-- 轮播图JS -->
    <script>
      var swiper = new Swiper(".mySwiper", {

        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + "</span>";
          },
        },
      });
    </script>
    <!--轮播图2  -->
       <script>
        let active=0;
        let itemUL=document.querySelector(".carouselkuang");
        let left=document.querySelector(".left");
        let right=document.querySelector(".right")

        left.onclick=function(){
            active--;
            
            if(active==-1){
            // itemUL.style.right=0+"px";
            active=5;
            itemUL.style.right=active*750+"px";    
            }
            itemUL.style.right=active*750+"px";
        }
        right.onclick=function(){
            active--;
            itemUL.style.left=active*750+"px";
            if(active==-5){
            itemUL.style.left=0+"px";
            active=1;
                
            }
           
        }
       </script>
    <script>
      // 获取商品列表
      // 获取用户id
      let indexAPI = "http://jx.xuzhixiang.top/ap/api/allproductlist.php";
      let uid = localStorage.getItem("id");
      let pagesize = 10;
      let pagenum = 0;
    $(".carouselNav span").html(pagenum+"/4");
      listshaop();
       
      $(".carousel .left").click(function(){
          pagenum--;
    $(" .carouselNav span").html(pagenum+"/4");

       listshaop();

      })
      $(".carousel .right").click(function(){
          pagenum++;
    $(".carouselNav span").html(pagenum+"/4");

       listshaop();

      })

       
         function listshaop(){
            $.get(
        indexAPI,
        {
          uid,
          pagesize,
          pagenum,
        },
        function (tes) {
            
        //   console.log(tes.data[0]);
        let listArr=tes.data;
        let sc=listArr.map(
            (pboj) =>
                `
              <li>

               <a href="xqy.html?id=${pboj.pid}">
                <img src="${pboj.pimg}" >

                <p style="height:42px;">${pboj.pname}</p>
                 <p style="color:red;">￥${pboj.pprice}</p>
                </a>
              </li>
                 `
            
           
          )
          $(".carouselyi").html(sc);
          $(".themeConter .left ul").html(sc);
          // $(".carouselyi").html(sc);

          
        }
      );
         }
    </script>
    <div></div>
  </body>
</html>
